<template>
    <div style='width:100%;text-align:center;overflow:hidden'>
        <el-row>
            <el-col :span="12" style='padding:5px'>
                主摄像头：<br/>
                <img id="bigPriDev" width="640" height="480"  :src="src"/>
            </el-col>
             <el-col :span="12"  style='padding:5px'>
                 副摄像头：<br/>
                <img id="bigPriDev2" width="640" height="480"  :src="src2"/>
            </el-col>
        </el-row>
        <div>
            <span style='color:red;font-weight:bold;line-height:30px'>  选择拍照摄像头:</span>
            <el-select v-model="video" placeholder="请选择摄像头">
                <el-option
               
                    label="主摄像头"
                    value="main">
                </el-option>
                 <el-option
               
                    label="副摄像头"
                    value="child">
                </el-option>
            </el-select>
        </div>
        <div style='width:100%;text-align:left;padding-left:20px;' class='bottoms'>
           
            
            <el-button type="primary" id="uploads" v-if="names.length<=1">上传</el-button>
            <template v-else>
                <el-button type="primary" style='margin-top:5px' class="uploads" @click="changeName(item)"  v-for="(item,index) in names" :key="index">{{item}}</el-button>
            </template>
            
            <el-button type="danger" @click="closes()" >关闭</el-button>
        </div>
    </div>
</template>
<script>
export default {
    name:"hight-shot-img",
    props:["show","appid","showType","params"],
    data(){
        return{
            
            baseUrl:"ws://127.0.0.1:12345",
            socket:null,
            message:"",
            first:true,
            dialog:null,
            src:"",
            src2:"",
            names:[],
            name:"",
            video:"main"
        }
    },
    created(){
        try{
            if(this.params&&this.params.names){
                this.names=this.params.names.split(",");
            }
            if(this.names.length==1){
                this.name=this.names[0]
            }
        }catch(e){}
        
        
        this.openImg();
       
    },
    
    methods:{
        changeName(item){
            this.name=item;
        },
        openImg(){
            this.socket = new WebSocket(this.baseUrl);
            this.socket.onclose = function()
            {
                console.error("web channel closed");
            };
            this.socket.onerror = function(error)
            {
                console.error("web channel error: " + error);
            };
            let sef=this;
            this.socket.onopen = function()
            {
                
                
                sef.$qweb(sef.socket, function(channel) {
                    //获取注册的对象
                    window.dialog = channel.objects.dialog;
                    sef.dialog=dialog;
                    window.onbeforeunload = function() {
							dialog.get_actionType("closeSignal");
						}
						window.onunload = function() {
							dialog.get_actionType("closeSignal");
						}
                    sef.GLOBAL.dialogsImg=dialog;
                    sef.GLOBAL.socketsImg=sef.socket;
                    /*dialog.sendPrintInfo.connect(function(message) {
                       // localStorage.setItem("mainDev","");
                      //  localStorage.setItem("childDev","");
                        //priDevName:Kupar
                        console.log("messagte==================================================================="+message)
                        if(message.indexOf("priDevName:")!=-1){
                            //alert(message)
                            if(sef.first){
                               // localStorage.setItem("mainDev","");
                              //  localStorage.setItem("childDev","");
                                sef.first=false;
                            }
                            console.log("HIGSHOT11--"+message);
                            console.log(localStorage.getItem("childDev")+"=="+localStorage.getItem("mainDev"));
                             if(localStorage.getItem("childDev")==""||localStorage.getItem("childDev")==null||localStorage.getItem("childDev")=="null"){
                                 localStorage.setItem("childDev",message.replace("priDevName:",""));
                             }else  if(localStorage.getItem("mainDev")==""||localStorage.getItem("mainDev")=="null"||localStorage.getItem("mainDev")==null){
                                 localStorage.setItem("mainDev",message.replace("priDevName:",""));
                             }
                             console.log("初始化完成--"+localStorage.getItem("childDev")+"=="+localStorage.getItem("mainDev"));
                           
                             if(localStorage.getItem("childDev")&&localStorage.getItem("mainDev")){
                                // alert("typesss========22================="+ localStorage.getItem("childDev")+"=="+localStorage.getItem("mainDev"))
                                if(sef.showType=="main"){
                                    console.log("typesss========22================="+ localStorage.getItem("childDev")+"=="+localStorage.getItem("mainDev"))
                                    dialog.devChanged("primaryDev_:" + localStorage.getItem("mainDev"));
                                }else{
                                    console.log("typesss========================="+ localStorage.getItem("childDev")+"=="+localStorage.getItem("mainDev"))
                                    dialog.devChanged("primaryDev_:" + localStorage.getItem("childDev"));
                                }
                             }
                             
                        }
                    });*/
                    //接收图片流用来展示，多个，较小的base64，主头数据
					
                    dialog.send_priImgData.connect(function(message) {
                       
                         if(!sef.show){
                            //dialog.get_actionType("closePriVideo");	
                           // dialog.get_actionType("closeSignal");
                        }
                        ///console.log(message);
                        var element = document.getElementById("bigPriDev");
                       
                        element.src = "data:image/jpg;base64," + message;							
                    });
                    dialog.send_subImgData.connect(function(message) {
                      
                        var element = document.getElementById("bigPriDev2");
                        element.src = "data:image/jpg;base64," + message;		
                       // sef.src="data:image/jpg;base64," + message;		
                    });

                  
                  
                    //接收拍照base64
                    dialog.send_priPhotoData.connect(function(message) {
                        console.log("djlsjfsdjlsdjlfsdlflsdflsdj111")
                        console.log(sef.params,"this.params===============================")
                       // var element = document.getElementById("bigPriDev");
                       // element.src = "data:image/jpg;base64," + message;	
                        if(sef.message!=message){
                            sef.message=message;
                            sef.$post(sef.appid,"/api/file/fileUploadBase64",{data:message,model:sef.params.model,type:sef.params.type,id:sef.params.id,token:sef.params.token,name:sef.name}).then(data=>{
                                console.log("uploadImg==========================");
                                console.log(data);
                                sef.$emit("uploadImg",JSON.stringify(data))
                            });	
                        }
                        					
                    });

                    //接收拍照base64，副头数据
                    dialog.send_subPhotoData.connect(function(message) {
                        console.log("djlsjfsdjlsdjlfsdlflsdflsdj111")
                        console.log(sef.params,"this.params===============================")
                       // var element = document.getElementById("bigPriDev");
                       // element.src = "data:image/jpg;base64," + message;	
                        if(sef.message!=message){
                            sef.message=message;
                            sef.$post(sef.appid,"/api/file/fileUploadBase64",{data:message,model:sef.params.model,type:sef.params.type,id:sef.params.id,token:sef.params.token,name:sef.name}).then(data=>{
                                console.log("uploadImg==========================");
                                console.log(data);
                                sef.$emit("uploadImg",JSON.stringify(data))
                            });	
                        }						
                    });
                   /* document.getElementById("changes").onclick = function() {
                        if(sef.showType=="main"){
                            let mainDev=localStorage.getItem("mainDev");
                            localStorage.setItem("mainDev",localStorage.getItem("childDev"))
                            localStorage.setItem("childDev",mainDev);
                            dialog.devChanged("primaryDev_:" + localStorage.getItem("mainDev"));
                        }else{
                            let mainDev=localStorage.getItem("mainDev");
                            localStorage.setItem("mainDev",localStorage.getItem("childDev"))
                            localStorage.setItem("childDev",mainDev);
                            dialog.devChanged("primaryDev_:" + localStorage.getItem("childDev"));
                        }
                    };*/
                    try{
                         document.getElementById("uploads").onclick = function() {
                             if(sef.video=="main"){
                                 dialog.photoBtnClicked("primaryDev_");
							    dialog.get_actionType("savePhotoPriDev");
                             }else{
                                 dialog.photoBtnClicked("subDev_");
							    dialog.get_actionType("savePhotoSubDev");
                             }
                          
                        };
                    }catch(e){}
                    try{
                        let uploads=document.getElementsByClassName("uploads");
                        for(let h=0;h<uploads.length;h++){
                            uploads[h].onclick = function() {
                                 if(sef.video=="main"){
                                    dialog.photoBtnClicked("primaryDev_");
                                    dialog.get_actionType("savePhotoPriDev");
                                }else{
                                    dialog.photoBtnClicked("subDev_");
                                    dialog.get_actionType("savePhotoSubDev");
                                }
                            };
                        }
                    }catch(e){}
                    
                    
                    dialog.html_loaded("two");
                    
                });
                
            }
        },
        upload(){
           // dialog.photoBtnClicked("primaryDev_");
			dialog.get_actionType("savePhotoPriDev");
            
        },
        closes(){
            /*try{
                this.socket.close();
            }catch(e){}*/
            this.$emit("closes","");
           // var element = document.getElementById("bigPriDev");
            //element.src ="";
        }
    },
    beforeDestroy(){
        
        if(this.dialog)
            this.dialog.get_actionType("closeSignal");
        let sef=this;
        if(sef.socket)
            sef.socket.close();
        this.GLOBAL.dialogs=null;
        this.GLOBAL.readId="";
    },
    watch:{
        show(val,old){
            
           /* if(val){
                this.first=true;
                this.openImg();
            }else{
               // this.dialog.get_actionType("closePriVideo");	
                this.dialog.get_actionType("closeSignal");
                let sef=this;
                sef.socket.close();
                
                
            }*/
        }
    }
}
</script>
<style scoped>
.bottoms{
    box-sizing: border-box;
    overflow: hidden;
}
</style>